<template>
  <div>
    <el-container>
      <el-header class="header">
        <h2>{{ title }}</h2>
        <div class="bsgsTag">
          <Tag :tag="initTag[0]" />
          <Tag :tag="initTag[1]" />
          <Tag :tag="initTag[2]" />
          <Tag :tag="initTag[3]" />
          <Tag :tag="initTag[4]" />
          <Tag :tag="initTag[5]" />
          <Tag :tag="initTag[6]" />
          <Tag :tag="initTag[7]" />
        </div>
      </el-header>
      <el-main class="main">
        <div class="column">
          <div class="panle line">
            <h2>人口涌入统计</h2>
            <div class="panle--button">
              <el-button type="primary" size="mini" @click="siChuanHandle()"
                >四川</el-button
              >
              <el-button type="primary" size="mini" @click="chongQingHandle()"
                >重庆</el-button
              >
              <el-button type="primary" size="mini" @click="guangXiHandle()"
                >广西</el-button
              >
              <el-button type="primary" size="mini" @click="xiZangHandle()"
                >西藏</el-button
              >
            </div>
            <div class="chart" ref="lefttop">图表</div>
            <div class="panle--footer"></div>
          </div>
          <div class="panle bar">
            <h2>某日涌入流失情况</h2>
            <div class="chart" ref="leftfooter">图表</div>
            <div class="panle--footer"></div>
          </div>
        </div>
        <div class="column">
          <div class="mainbody">
            <div class="mainbody-box">
              <h2>搜索框</h2>
              <el-input
                v-model="input"
                placeholder="暂不支持查询"
                :disabled="true"
              ></el-input>
            </div>
            <div class="mainbody-box">
              <h2>选择器</h2>
              <el-select
                v-model="initvalue"
                filterable
                placeholder="人口涌入统计"
                @change="selectchange"
              >
                <el-option
                  v-for="item in initselects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>

            </div>
            <div class="mainbody-box">
              <h2>时间范围选择器</h2>
              <el-time-select
                v-model="iniTimeSelect"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }"
                placeholder="时间选择器"
              >
              </el-time-select>

            </div>
          </div>
        </div>
        <div class="column">
          <div class="panle line2">
            <h2>人口流失统计</h2>
            <div class="chart" ref="righttop">图表</div>
            <div class="panle--footer"></div>
          </div>
          <div class="panle">
            <div class="scroll--box">
              <ListScroll />
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import * as echarts from "echarts";
import ListScroll from "./ListScroll.vue";
import Tag from "./Tag.vue";
export default {
  name: "Child",
  components: {
    ListScroll,
    Tag,
  },
  data() {
    return {
      title: "中国各省份人口流向统计系统",
      yearData: [
        {
          name: "四川",
          data: [[150, 80, 751, 41, 90, 160, 45, 79, 45, 147, 240, 146]],
        },
        {
          name: "重庆",
          data: [[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38]],
        },
        {
          name: "西藏",
          data: [[427, 87, 117, 341, 124, 74, 574, 455, 445, 114, 744, 47]],
        },
        {
          name: "广西",
          data: [[532, 123, 312, 353, 542, 120, 421, 275, 375, 424, 472, 68]],
        },
      ],
      count: 0,
      obj: [],
      myChartshili: [],
      initdata: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      initTag: ["北涌", "北流", "上涌", "上流", "广涌", "广流", "深涌", "深流"],
      input: "",
      initselects: [
        {
          value: "选项1",
          label: "四川",
        },
        {
          value: "选项2",
          label: "重庆",
        },
        {
          value: "选项3",
          label: "广西",
        },
        {
          value: "选项4",
          label: "西藏",
        },
      ],
      initvalue: "",
      iniTimeSelect:""
    };
  },
  mounted() {
    // 左上图
    this.myChartshili[0] = echarts.init(this.$refs.lefttop);
    this.zuoshangzheian(this.initdata);
    window.addEventListener("resize", this.handleResize);
    //右上图
    this.yousangzhexian();
    //左下图
    this.zuoxiazhuzhuang();
  },
  beforeDestroy() {
    if (this.myChartshili[0]) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  methods: {
    zuoshangzheian(data) {
      
      var option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#4c9bfd",
          },
          icon: "rect",
          top: "5%",
          right: "10%",
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            show: false, // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd", // 文本颜色
          },
          axisLine: {
            show: false, // 去除轴线
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, // 去除刻度
          },
          axisLabel: {
            color: "#4c9bfd", // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a", // 分割线颜色
            },
          },
        },
        series: [
          {
            name: "涌入情况",
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 4,
            },
            smooth: true,
            data: data,
          },
        ],
      };
      this.myChartshili[0].setOption(option);
    },
    yousangzhexian() {
      const myChart = echarts.init(this.$refs.righttop);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          icon: "rect",
          textStyle: {
            color: "#fff",
          },
          right: "3%",
          top: "8%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
              "星期天",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#4c9bfd",
            },
            axisLine: {
              show: false,
            },
            smooth: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#4c9bfd",
            },
          },
        ],
        series: [
          {
            name: "广西",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 34, 120],
          },
          {
            name: "西藏",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [220, 182, 191, 234, 290, 72, 68],
          },
          {
            name: "重庆",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [150, 232, 201, 154, 190, 75, 97],
          },
          {
            name: "四川",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 设置拐点颜色以及边框
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            data: [320, 332, 301, 334, 390, 174, 95],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {

        myChart.resize();
      });
    },
    zuoxiazhuzhuang() {
      const myChart = echarts.init(this.$refs.leftfooter);
      const option = {
        color: ["#2f89cf"],
        legend: {
          right: "5%",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["四川", "重庆", "广西", "西藏"],
          axisLabel: {
            color: "#4c9bfd",
            fontSize: "12",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#4c9bfd",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 2,
              type: "solid",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        series: [
          {
            data: [949, 300, 45, 900],
            type: "bar",
            barWidth: "35%",
            itemStyle: {
              // 修改柱子圆角
              borderRadius: 5,
            },
            name: "涌入",
          },
          {
            data: [200, 195, 487, 657],
            type: "bar",
            barWidth: "35%",
            itemStyle: {
              // 修改柱子圆角
              borderRadius: 5,
              color: "#a90000",
            },
            name: "流失",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
      };
      //把配置项给实例对象
      myChart.setOption(option);
      //让图表跟着页面缩放而适配
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    siChuanHandle() {
      this.obj = this.yearData[0];
      this.zuoshangzheian(this.obj.data[0]);
    },
    chongQingHandle() {
      this.obj = this.yearData[1];
      this.zuoshangzheian(this.obj.data[0]);
    },
    guangXiHandle() {
      this.obj = this.yearData[2];
      this.zuoshangzheian(this.obj.data[0]);
    },
    xiZangHandle() {
      this.obj = this.yearData[3];
      this.zuoshangzheian(this.obj.data[0]);
    },
    load() {
      this.count += 2;
    },
    handleResize() {
      if (this.myChartshili[0]) {

        this.myChartshili[0].resize();
      }
    },
    selectchange(value){
      const selectchangelable = this.initselects.find(option => option.value === value);
      const d = selectchangelable.label;
      if(d === "四川"){
        this.siChuanHandle()
      }else if(d === "重庆"){
        this.chongQingHandle()
      }else if(d === "广西"){
        this.guangXiHandle()
      }else if(d === "西藏"){
        this.xiZangHandle()
      }
      
    }
  },
};
</script>.value

<style src="../../assets/css/index.css"></style>
<style src="../../assets/css/reset.css"></style>
